import React from 'react';
import {Row, Col} from 'antd';
import {TweenOneGroup} from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

class GrowthData extends React.PureComponent {
  state = {
    hoverBlock: ''
  }
  getChildrenToRender = (data) =>
    data.map((item) => {
      return (
        <Col key={item.name} {...item}>
          <div {...item.children.wrapper}>
            <div {...item.children.img}>
              {/*<img style={{display:'absolute'}} src={item.children.img.children} height="100%" alt="img" />*/}
              <div
                onMouseEnter={() => this.setState({hoverBlock: item.children.title})}
                onMouseLeave={() => this.setState({hoverBlock: ''})}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '150px',
                  background: `${item.children.background}`
                }}>
                {this.state.hoverBlock === item.children.title ?
                  <div
                    style={{
                      width: '80%',
                      letterSpacing: 5,
                      fontStyle: 'italic',
                      color: 'white',
                      fontWeight: 'bold'
                    }}
                  ><span>{item.children.detail}</span></div>

                  : <span style={{
                    display: 'inline-block',
                    letterSpacing: 5,
                    lineHeight: '8',
                    fontSize: '18px',
                    fontStyle: 'italic',
                    color: 'white',
                    fontWeight: 'bold'
                  }}>
                  {item.children.title}
                  </span>
                }
              </div>
            </div>
          </div>
        </Col>
      );
    });

  render() {
    const {...props} = this.props;
    const {dataSource} = props;
    delete props.dataSource;
    delete props.isMobile;
    const childrenToRender = this.getChildrenToRender(
      dataSource.block.children
    );
    return (
      <div {...props} {...dataSource.wrapper}>
        <div {...dataSource.page}>
          <div key="title" {...dataSource.titleWrapper}>
            {dataSource.titleWrapper.children.map((item, i) =>
              React.createElement(
                item.name.indexOf('title') === 0 ? 'h1' : 'div',
                {key: i.toString(), ...item},
                typeof item.children === 'string' &&
                item.children.match(
                  /\.(svg|gif|jpg|jpeg|png|JPG|PNG|GIF|JPEG)$/
                )
                  ? React.createElement('img', {
                    src: item.children,
                    alt: 'img',
                  })
                  : item.children
              )
            )}
          </div>
          <OverPack
            className={`content-template ${props.className}`}
            {...dataSource.OverPack}
          >
            <TweenOneGroup
              component={Row}
              key="ul"
              enter={{
                y: '+=30',
                opacity: 0,
                type: 'from',
                ease: 'easeInOutQuad',
              }}
              leave={{y: '+=30', opacity: 0, ease: 'easeInOutQuad'}}
              {...dataSource.block}
            >
              {childrenToRender}
              <div style={{
                textAlign: 'center',
                marginBottom: 10
              }}>
                <p style={{marginBottom:5}}>福利不在一天，也不止6条</p>
                <p><a href='https://join.thoughtworks.cn/'>点击了解详情 ></a></p>
              </div>
            </TweenOneGroup>
          </OverPack>
        </div>
      </div>
    );
  }
}

export default GrowthData;
